<template>
  <div class="win10-layout">
    <!-- Windows 10 任务栏 -->
    <div class="taskbar" :class="taskbarPositionClass">
      <!-- 开始菜单按钮（任务栏左侧） -->
    <div class="start-button" @click="toggleStartMenu">
      <div class="start-icon">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <rect x="3" y="3" width="7" height="7" fill="currentColor"/>
          <rect x="14" y="3" width="7" height="7" fill="currentColor"/>
          <rect x="3" y="14" width="7" height="7" fill="currentColor"/>
          <rect x="14" y="14" width="7" height="7" fill="currentColor"/>
        </svg>
      </div>
    </div>

      <!-- 返回桌面按钮 -->
      <div 
        class="desktop-button" 
        @click="isDesktopPage && lastActivePath ? restoreLastPage() : goToDesktop()"
        :class="{ active: isDesktopPage }"
        :title="isDesktopPage && lastActivePath ? '返回上一页面' : '返回桌面'"
      >
        <el-icon :size="18">
          <Monitor />
        </el-icon>
      </div>

      <div class="taskbar-left">
        <!-- 当前打开的窗口/应用 -->
        <div class="open-windows" ref="openWindowsRef">
          <div
            v-for="tab in visibleTabs"
            :key="tab.path"
            class="window-item"
            :class="{ active: route.path === tab.path }"
            @click="handleWindowClick(tab.path)"
            :title="route.path === tab.path ? '点击切换到桌面' : tab.title"
          >
            <div class="window-icon" :style="{ background: tab.color }">
              <el-icon :size="16">
                <component :is="tab.icon" />
              </el-icon>
            </div>
            <div class="window-label">{{ tab.title }}</div>
        </div>

          <!-- 更多窗口按钮 -->
          <el-dropdown v-if="hasMoreTabs" trigger="click" placement="top">
            <div class="window-item more-windows" :title="`还有 ${hiddenTabsCount} 个窗口`">
              <el-icon :size="16"><More /></el-icon>
              <div class="window-label">+{{ hiddenTabsCount }}</div>
        </div>
            <template #dropdown>
              <el-dropdown-menu class="more-windows-menu">
                <el-dropdown-item
                  v-for="tab in hiddenTabs"
                  :key="tab.path"
                  @click="handleWindowClick(tab.path)"
                >
                  <div class="dropdown-window-item">
                    <div class="dropdown-icon" :style="{ background: tab.color }">
              <el-icon :size="14">
                        <component :is="tab.icon" />
              </el-icon>
            </div>
                    <span>{{ tab.title }}</span>
          </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <div class="taskbar-right">
        <!-- 系统托盘 -->
        <div class="system-tray">
          <div class="tray-item" @click="toggleNotifications">
            <el-icon :size="16"><Bell /></el-icon>
            <el-badge v-if="notificationCount > 0" :value="notificationCount" class="tray-badge" />
          </div>
          
          <div class="tray-item" @click="toggleSettings">
            <el-icon :size="16"><Setting /></el-icon>
          </div>

          <!-- 时间 -->
          <div class="tray-item time-display">
            <span>{{ currentTime }}</span>
          </div>

          <!-- AI助手按钮 -->
          <div class="tray-item ai-button" @click="toggleAIChat" :class="{ active: showAIChat }">
            <el-icon :size="16"><MagicStick /></el-icon>
            <div class="ai-pulse"></div>
          </div>

          <!-- 用户头像 -->
          <el-dropdown
            ref="userDropdownRef"
            trigger="click"
            placement="top-end"
            @command="handleUserCommand"
          >
            <div class="user-avatar">
            <el-avatar :size="28" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">
                  <el-icon><UserFilled /></el-icon>
                  个人中心
                </el-dropdown-item>
                <el-dropdown-item command="settings">
                  <el-icon><Setting /></el-icon>
                  系统设置
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  <el-icon><SwitchButton /></el-icon>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- Windows 10 开始菜单 -->
    <transition name="start-menu">
      <div v-if="showStartMenu" class="start-menu">
        <div class="start-menu-content">
          <!-- 左侧应用列表 -->
          <div class="apps-section">
            <!-- 菜单搜索框 -->
            <div class="menu-search">
              <el-input
                v-model="menuSearchKeyword"
                placeholder="搜索功能..."
                clearable
                @input="handleMenuSearch"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>

            <div v-if="!menuSearchKeyword" class="section-title">
              <div class="title-icon">
                <el-icon><Star /></el-icon>
              </div>
              推荐应用
            </div>
            <div v-if="!menuSearchKeyword" class="apps-grid">
              <div
                v-for="item in recommendedApps"
                :key="item.path"
                class="app-tile"
                @click="navigateTo(item.path)"
              >
                <div class="app-tile-glow" :style="{ background: item.color }"></div>
                <div class="app-tile-icon" :style="{ background: item.color }">
                  <el-icon :size="28">
                    <component :is="item.icon" />
                  </el-icon>
                </div>
                <div class="app-tile-name">{{ item.title }}</div>
                <el-tag v-if="item.badge" size="small" class="app-tile-badge" 
                  :type="item.badge === 'NEW' ? 'danger' : item.badge === 'AI' ? 'primary' : 'warning'">
                  {{ item.badge }}
                </el-tag>
              </div>
            </div>

            <div v-if="!menuSearchKeyword && recommendedApps.length === 0" style="text-align: center; color: #909399; padding: 20px;">
              暂无推荐应用
            </div>

            <div v-if="!menuSearchKeyword" class="section-title">
              <div class="title-icon">
                <el-icon><List /></el-icon>
              </div>
              所有应用
              <el-tag size="small" type="info" style="margin-left: 8px">
                {{ menuData.length || defaultApps.length }}个模块
              </el-tag>
            </div>
            <div v-if="menuSearchKeyword" class="section-title">
              <div class="title-icon">
                <el-icon><Search /></el-icon>
              </div>
              搜索结果
              <el-tag size="small" type="primary" style="margin-left: 8px">
                {{ searchResults.length }}个
              </el-tag>
              <el-tag v-if="menuSearchKeyword" size="small" type="info" style="margin-left: 4px">
                "{{ menuSearchKeyword }}"
              </el-tag>
            </div>
            <!-- 搜索结果列表 -->
            <div v-if="menuSearchKeyword" class="search-results">
              <div v-if="searchResults.length === 0" class="empty-search">
                <el-empty description="未找到匹配的功能" :image-size="80">
                  <el-text type="info" size="small">请尝试其他关键词</el-text>
                </el-empty>
              </div>
              <div
                v-for="item in searchResults"
                :key="item.path"
                class="search-result-item"
                @click="navigateTo(item.path)"
              >
                <div class="result-icon" :style="{ background: item.color }">
                  <el-icon :size="20">
                    <component :is="item.icon" />
                  </el-icon>
                </div>
                <div class="result-info">
                  <div class="result-title" v-html="highlightKeyword(item.title)"></div>
                  <div class="result-breadcrumb">
                    <span v-if="item.parentTitle">{{ item.parentTitle }} > </span>
                    <span class="result-path">{{ item.path }}</span>
                  </div>
                </div>
                <el-icon class="result-arrow"><ArrowRight /></el-icon>
              </div>
            </div>

            <!-- 所有应用列表 -->
            <div v-else class="all-apps">
              <div
                v-for="item in allApps"
                :key="item.path"
                class="app-item"
                :class="{ 
                  'sub-item': item.isChild, 
                  'has-children': item.hasChildren, 
                  'expanded': isMenuExpanded(item.path),
                  'parent-item': !item.isChild && item.hasChildren,
                  [`level-${item.level}`]: true
                }"
                :style="{ 
                  paddingLeft: `${20 + item.level * 28}px`,
                  marginLeft: item.level > 0 ? `${item.level * 4}px` : '0',
                  marginBottom: item.hasChildren && !item.isChild ? '12px' : '4px'
                }"
                @click="item.hasChildren ? toggleMenu(item) : navigateTo(item.path)"
              >
                <div class="app-item-icon" :style="{ background: item.color }">
                  <el-icon :size="item.level > 0 ? 16 : 20">
                    <component :is="item.icon" />
                  </el-icon>
                </div>
                <div class="app-item-info">
                <span class="app-item-name">{{ item.title }}</span>
                  <span v-if="item.badge" class="app-item-badge">
                    <el-tag size="small" :type="item.badge === 'NEW' ? 'danger' : item.badge === 'AI' ? 'primary' : 'warning'">
                      {{ item.badge }}
                    </el-tag>
                  </span>
              </div>
                <div v-if="item.hasChildren" class="expand-icon">
                  <el-icon>
                    <component :is="isMenuExpanded(item.path) ? ElementPlusIconsVue.ArrowDown : ElementPlusIconsVue.ArrowRight" />
                  </el-icon>
            </div>
          </div>
                </div>
                </div>

          <!-- 右侧已打开功能 -->
          <div class="open-tabs-section">
            <div class="tabs-header">
              <div class="tabs-title">
                <el-icon><Folder /></el-icon>
                已打开的功能
                </div>
              <el-tag size="small" type="info">{{ openTabs.length }}</el-tag>
              </div>

            <div v-if="openTabs.length === 0" class="empty-tabs">
              <el-empty description="暂无打开的功能" :image-size="60">
                <el-text type="info" size="small">从左侧选择功能打开</el-text>
              </el-empty>
            </div>

            <div v-else class="tabs-list">
              <div
                v-for="tab in openTabs"
                :key="tab.path"
                class="tab-item"
                :class="{ active: route.path === tab.path }"
              >
                <div class="tab-icon" :style="{ background: tab.color }">
                    <el-icon :size="16">
                    <component :is="tab.icon" />
                    </el-icon>
                  </div>
                <div class="tab-info" @click="navigateTo(tab.path)">
                  <div class="tab-title">{{ tab.title }}</div>
                  <div class="tab-path">{{ tab.path }}</div>
                </div>
                <button class="tab-close" @click.stop="closeTab(tab)">
                  <el-icon :size="14"><Close /></el-icon>
                </button>
              </div>
            </div>

            <div v-if="openTabs.length > 0" class="tabs-actions">
              <el-button size="small" text @click="closeAllTabs">
                <el-icon><Delete /></el-icon>
                关闭所有
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 遮罩层 -->
    <div v-if="showStartMenu" class="start-menu-overlay" @click="closeStartMenu"></div>

    <!-- 通知中心面板 -->
    <transition name="notification-panel">
      <div v-if="showNotificationPanel" class="notification-center">
        <div class="notification-header">
          <h3>通知中心</h3>
          <div class="header-actions">
            <el-button text size="small" @click="clearAllNotifications">
              清空
            </el-button>
            <el-button text size="small" @click="closeNotifications">
              <el-icon><Close /></el-icon>
            </el-button>
          </div>
        </div>
        <div class="notification-list">
          <div
            v-for="notification in notifications"
            :key="notification.id"
            class="notification-item"
            :class="{ unread: !notification.read }"
            @click="markAsRead(notification)"
          >
            <div class="notification-icon" :class="notification.type">
              <el-icon v-if="notification.type === 'success'"><CircleCheckFilled /></el-icon>
              <el-icon v-else-if="notification.type === 'warning'"><WarningFilled /></el-icon>
              <el-icon v-else><InfoFilled /></el-icon>
            </div>
            <div class="notification-content">
              <div class="notification-title">{{ notification.title }}</div>
              <div class="notification-message">{{ notification.message }}</div>
              <div class="notification-time">{{ notification.time }}</div>
            </div>
            <div v-if="!notification.read" class="unread-dot"></div>
          </div>
          <el-empty v-if="notifications.length === 0" description="暂无通知" :image-size="80" />
        </div>
      </div>
    </transition>

    <!-- 通知遮罩层 -->
    <div v-if="showNotificationPanel" class="notification-overlay" @click="closeNotifications"></div>

    <!-- AI对话面板 -->
    <AIChatPanel 
      :visible="showAIChat" 
      @close="closeAIChat"
    />

    <!-- 主内容区 -->
    <main class="main-content" :class="{ 
      'is-desktop': isDesktopPage,
      [`taskbar-${taskbarPosition}`]: true
    }">
      <router-view v-slot="{ Component }">
        <transition name="page-fade" mode="out-in">
          <component :is="Component" v-if="Component" :key="$route.fullPath" />
          <div v-else class="empty-content">
            <el-empty description="欢迎使用 Windows 10 风格导航">
              <el-button type="primary" @click="toggleStartMenu">
                打开开始菜单
              </el-button>
            </el-empty>
          </div>
        </transition>
      </router-view>
    </main>

  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, markRaw, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import {
  Search, Bell, Setting, HomeFilled, DataBoard, UserFilled, SwitchButton,
  Close, CircleCheckFilled, WarningFilled, InfoFilled, MagicStick, Folder,
  Delete, Promotion, Microphone, ArrowRight, More, Star, List, Monitor
} from '@element-plus/icons-vue'
import { menuData } from '@/config/menu'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import AIChatPanel from '@/components/Win10/AIChatPanel.vue'
import { keyUser } from '@/api/data'

const router = useRouter()
const route = useRoute()

// 判断是否为桌面页面
const isDesktopPage = computed(() => route.path === '/win10/desktop')

// 任务栏位置类
const taskbarPositionClass = computed(() => {
  return {
    'taskbar-bottom': taskbarPosition.value === 'bottom',
    'taskbar-top': taskbarPosition.value === 'top',
    'taskbar-left': taskbarPosition.value === 'left',
    'taskbar-right': taskbarPosition.value === 'right',
    'taskbar-auto-hide': autoHideTaskbar.value
  }
})

const showStartMenu = ref(false)
const searchKeyword = ref('')
const currentTime = ref('')
const notificationCount = ref(3)
const userDropdownRef = ref(null)
const expandedMenus = ref([]) // 展开的菜单ID
const openTabs = ref([]) // 打开的标签页
const showAIChat = ref(false) // AI对话面板
const menuSearchKeyword = ref('') // 菜单搜索关键词
const searchResults = ref([]) // 搜索结果
const openWindowsRef = ref(null) // 窗口容器引用
const maxVisibleTabs = ref(8) // 最大可见窗口数量
const lastActivePath = ref('') // 记录桌面切换前的最后活动页面
const taskbarPosition = ref('bottom') // 任务栏位置配置
const autoHideTaskbar = ref(false) // 自动隐藏任务栏

// 颜色配置（对应不同模块）
const colorMap = {
  '/dashboard': '#0078d4',
  '/sales': '#107c10',
  '/inventory': '#d13438',
  '/finance': '#ff8c00',
  '/member': '#8764b8',
  '/reports': '#00bcf2',
  '/cockpit': '#8764b8',
  '/extensions': '#ff8c00',
  '/system': '#6c757d',
  '/office': '#20c997',
  '/learning': '#e83e8c',
  '/lowcode': '#dc3545',
  '/purchase': '#17a2b8',
  '/basedata': '#6610f2'
}

// 从菜单配置生成应用列表
const generateAppFromMenu = (menuItem) => {
  const iconComponent = menuItem.icon && ElementPlusIconsVue[menuItem.icon]
    ? markRaw(ElementPlusIconsVue[menuItem.icon])
    : markRaw(HomeFilled)

  return {
    path: menuItem.path,
    title: menuItem.title,
    icon: iconComponent,
    color: colorMap[menuItem.path] || '#6c757d',
    badge: menuItem.badge || '',
    parentTitle: menuItem.parentTitle || '' // 父菜单标题
  }
}

// 默认应用配置（防止menuData为空）
const defaultApps = [
  { path: '/dashboard', title: '数据概览', icon: 'HomeFilled', color: '#0078d4' },
  { path: '/sales', title: '销售管理', icon: 'ShoppingCart', color: '#107c10' },
  { path: '/inventory', title: '库存管理', icon: 'Box', color: '#d13438' },
  { path: '/finance', title: '财务管理', icon: 'Money', color: '#ff8c00' },
  { path: '/member', title: '会员管理', icon: 'UserFilled', color: '#8764b8' },
  { path: '/reports', title: '报表中心', icon: 'DataBoard', color: '#00bcf2' },
  { path: '/basedata', title: '基础资料', icon: 'Files', color: '#6610f2' },
  { path: '/lowcode', title: '低代码平台', icon: 'Tools', color: '#dc3545' },
  { path: '/project/list', title: '项目管理', icon: 'Folder', color: '#20c997' },
  { path: '/office/announcements', title: '办公管理', icon: 'Reading', color: '#17a2b8' },
  { path: '/hr', title: '人力资源', icon: 'User', color: '#6c757d' },
  { path: '/system', title: '系统管理', icon: 'Setting', color: '#343a40' }
]

// 固定到任务栏的应用（选取重要模块）
// 计算窗口宽度，根据屏幕宽度自动调整可见窗口数量
const calculateMaxVisibleTabs = () => {
  const screenWidth = window.innerWidth
  const taskbarRightWidth = 300 // 系统托盘预留宽度
  const startButtonWidth = 60 // 开始按钮宽度
  const windowItemWidth = 150 // 每个窗口项宽度
  const moreButtonWidth = 80 // 更多按钮宽度
  
  const availableWidth = screenWidth - taskbarRightWidth - startButtonWidth - moreButtonWidth
  const maxTabs = Math.floor(availableWidth / windowItemWidth)
  
  // 最少显示3个，最多显示12个
  maxVisibleTabs.value = Math.max(3, Math.min(12, maxTabs))
}

// 可见的标签页
const visibleTabs = computed(() => {
  // 确保当前活动的标签页在可见范围内
  const currentIndex = openTabs.value.findIndex(tab => tab.path === route.path)
  
  if (currentIndex !== -1 && currentIndex >= maxVisibleTabs.value) {
    // 如果当前页不在可见范围，调整顺序
    const reordered = [...openTabs.value]
    const current = reordered.splice(currentIndex, 1)[0]
    reordered.unshift(current)
    return reordered.slice(0, maxVisibleTabs.value)
  }
  
  return openTabs.value.slice(0, maxVisibleTabs.value)
})

// 隐藏的标签页
const hiddenTabs = computed(() => {
  const currentIndex = openTabs.value.findIndex(tab => tab.path === route.path)
  
  if (currentIndex !== -1 && currentIndex >= maxVisibleTabs.value) {
    const reordered = [...openTabs.value]
    reordered.splice(currentIndex, 1)
    return reordered.slice(maxVisibleTabs.value - 1)
  }
  
  return openTabs.value.slice(maxVisibleTabs.value)
})

// 是否有更多标签页
const hasMoreTabs = computed(() => openTabs.value.length > maxVisibleTabs.value)

// 隐藏的标签页数量
const hiddenTabsCount = computed(() => hiddenTabs.value.length)

// 推荐应用（从所有应用中选择前6个）
const recommendedApps = computed(() => {
  if (!menuData || menuData.length === 0) {
    return defaultApps.slice(0, 6).map(item => ({
      ...item,
      icon: markRaw(ElementPlusIconsVue[item.icon] || HomeFilled)
    }))
  }
  
  return menuData.slice(0, 6).map(item => generateAppFromMenu(item))
})

// 递归生成菜单应用列表（支持多级菜单）
const generateMenuApps = (menus, level = 0, parentPath = null, parentTitle = null) => {
  const apps = []
  
  menus.forEach(menu => {
    const menuPath = menu.path
    const hasChildren = menu.children && menu.children.length > 0
    const isExpanded = expandedMenus.value.includes(menuPath)
    
    // 添加当前菜单项
    apps.push({
      ...generateAppFromMenu(menu),
      hasChildren,
      children: menu.children || [],
      isChild: level > 0,
      level,
      parentPath,
      parentTitle
    })
    
    // 如果菜单被展开且有子菜单，递归添加子菜单
    if (isExpanded && hasChildren) {
      const childApps = generateMenuApps(
        menu.children,
        level + 1,
        menuPath,
        menu.title
      )
      apps.push(...childApps)
    }
  })
  
  return apps
}

// 所有应用（支持多级菜单，带折叠展开功能）
const allApps = computed(() => {
  if (!menuData || menuData.length === 0) {
    return defaultApps.map(item => ({
      ...item,
      icon: markRaw(ElementPlusIconsVue[item.icon] || HomeFilled),
      hasChildren: false,
      level: 0
    }))
  }

  return generateMenuApps(menuData)
})

// 切换菜单展开/折叠
const toggleMenu = (item) => {
  if (!item.hasChildren) {
    // 没有子菜单，直接导航
    navigateTo(item.path)
    return
  }

  const index = expandedMenus.value.indexOf(item.path)
  if (index > -1) {
    // 已展开，折叠
    expandedMenus.value.splice(index, 1)
  } else {
    // 未展开，展开
    expandedMenus.value.push(item.path)
  }
}

// 检查菜单是否展开
const isMenuExpanded = (path) => {
  return expandedMenus.value.includes(path)
}

// 最近访问的应用
const recentApps = ref([
  {
    path: '/dashboard',
    title: '数据概览',
    icon: markRaw(HomeFilled),
    color: '#0078d4'
  },
  {
    path: '/sales',
    title: '销售管理',
    icon: markRaw(ElementPlusIconsVue.ShoppingCart),
    color: '#107c10'
  },
  {
    path: '/inventory',
    title: '库存管理',
    icon: markRaw(ElementPlusIconsVue.Box),
    color: '#d13438'
  }
])

// 当前打开的应用（模拟）
let timeInterval = null

onMounted(async () => {
  updateTime()
  timeInterval = setInterval(updateTime, 1000)

  // 初始化未读通知数量
  notificationCount.value = notifications.value.filter(n => !n.read).length

  // 初始化窗口显示数量
  calculateMaxVisibleTabs()
  
  // 监听窗口大小变化
  window.addEventListener('resize', calculateMaxVisibleTabs)

  // 加载显示设置
  await loadDisplaySettings()

  // 监听显示设置变化（通过自定义事件）
  window.addEventListener('display-settings-updated', handleDisplaySettingsUpdate)

  // 调试信息
  console.log('Win10Layout已加载')
  console.log('推荐应用数量:', recommendedApps.value.length)
  console.log('菜单模块数量:', menuData.length || defaultApps.length)
  console.log('当前路由:', route.path)
  console.log('最大可见窗口数:', maxVisibleTabs.value)
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
  
  // 移除窗口大小监听
  window.removeEventListener('resize', calculateMaxVisibleTabs)
  
  // 移除显示设置变化监听
  window.removeEventListener('display-settings-updated', handleDisplaySettingsUpdate)
})

const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  })
}

const toggleStartMenu = () => {
  showStartMenu.value = !showStartMenu.value
}

const closeStartMenu = () => {
  showStartMenu.value = false
  // 清空搜索
  menuSearchKeyword.value = ''
  searchResults.value = []
}

// 返回桌面
const goToDesktop = () => {
  if (route.path !== '/win10/desktop') {
    // 记录当前页面，以便返回
    lastActivePath.value = route.path
    router.push('/win10/desktop')
  }
}

// 菜单搜索功能
const handleMenuSearch = () => {
  if (!menuSearchKeyword.value.trim()) {
    searchResults.value = []
    return
  }
  
  const keyword = menuSearchKeyword.value.toLowerCase()
  const results = []
  
  // 搜索所有菜单（包括父菜单和子菜单）
  if (menuData && menuData.length > 0) {
    menuData.forEach(menu => {
      // 搜索父菜单
      if (menu.title.toLowerCase().includes(keyword)) {
        results.push({
          ...generateAppFromMenu(menu),
          parentTitle: null
        })
      }
      
      // 搜索子菜单
      if (menu.children && menu.children.length > 0) {
        menu.children.forEach(child => {
          if (child.title.toLowerCase().includes(keyword)) {
            results.push({
              ...generateAppFromMenu(child),
              parentTitle: menu.title
            })
          }
        })
      }
    })
  } else {
    // 搜索默认应用
    defaultApps.forEach(app => {
      if (app.title.toLowerCase().includes(keyword)) {
        results.push({
          ...app,
          icon: markRaw(ElementPlusIconsVue[app.icon] || HomeFilled),
          parentTitle: null
        })
      }
    })
  }
  
  searchResults.value = results
}

// 高亮搜索关键词
const highlightKeyword = (text) => {
  if (!menuSearchKeyword.value.trim()) return text
  
  const keyword = menuSearchKeyword.value
  const regex = new RegExp(`(${keyword})`, 'gi')
  return text.replace(regex, '<span class="highlight">$1</span>')
}

const isActive = (path) => {
  return route.path.startsWith(path)
}

const navigateTo = (path) => {
  router.push(path)
  closeStartMenu()

  // 添加到打开的标签页
  addToOpenTabs(path)
}

// 任务栏窗口点击处理（支持页面与桌面切换）
const handleWindowClick = (path) => {
  // 如果点击的是当前激活的窗口
  if (route.path === path) {
    // 如果当前不在桌面，则切换到桌面
    if (route.path !== '/win10/desktop') {
      lastActivePath.value = path // 记录当前页面
      router.push('/win10/desktop')
    }
  } else {
    // 如果点击的不是当前窗口，则切换到该窗口
    router.push(path)
  }
}

// 桌面点击后恢复上次页面
const restoreLastPage = () => {
  if (lastActivePath.value && lastActivePath.value !== '/win10/desktop') {
    router.push(lastActivePath.value)
  }
}

// 递归搜索菜单项（支持多级菜单）
const findMenuItemByPath = (menus, targetPath) => {
  for (const menu of menus) {
    if (menu.path === targetPath) {
      return menu
    }
    
    // 递归搜索子菜单
    if (menu.children && menu.children.length > 0) {
      const found = findMenuItemByPath(menu.children, targetPath)
      if (found) return found
    }
  }
  return null
}

// 添加到打开的标签页
const addToOpenTabs = (path) => {
  // 检查是否已存在
  if (openTabs.value.some(tab => tab.path === path)) {
    return
  }

  // 从菜单数据中递归查找
  const foundItem = menuData && menuData.length > 0 
    ? findMenuItemByPath(menuData, path)
    : null

  if (foundItem) {
    const iconComponent = foundItem.icon && ElementPlusIconsVue[foundItem.icon]
      ? markRaw(ElementPlusIconsVue[foundItem.icon])
      : markRaw(HomeFilled)

    openTabs.value.push({
      path: foundItem.path,
      title: foundItem.title,
      icon: iconComponent,
      color: colorMap[foundItem.path] || '#6c757d'
    })
  }
}

// 监听路由变化，自动将访问的页面添加到任务栏
watch(() => route.path, (newPath) => {
  // 排除桌面页面
  if (newPath === '/win10/desktop') {
    return
  }
  
  // 排除登录、注册等特殊页面
  const excludePaths = ['/login', '/register', '/forgot-password', '/404', '/403', '/500']
  if (excludePaths.includes(newPath)) {
    return
  }
  
  // 如果页面不在 openTabs 中，自动添加
  addToOpenTabs(newPath)
}, { immediate: true })

// 关闭标签页
const closeTab = (tab) => {
  const index = openTabs.value.findIndex(t => t.path === tab.path)
  if (index > -1) {
    openTabs.value.splice(index, 1)

    // 如果关闭的是当前页面，跳转到最后一个标签页或首页
    if (route.path === tab.path) {
      if (openTabs.value.length > 0) {
        router.push(openTabs.value[openTabs.value.length - 1].path)
      } else {
        router.push('/dashboard')
      }
    }
  }
}

// 关闭所有标签页
const closeAllTabs = () => {
  openTabs.value = []
  router.push('/dashboard')
  ElMessage.success('已关闭所有标签页')
}

// 切换AI对话
const toggleAIChat = () => {
  showAIChat.value = !showAIChat.value
  if (showAIChat.value) {
    closeStartMenu()
    closeNotifications()
  }
}

const closeAIChat = () => {
  showAIChat.value = false
}

// 通知面板状态
const showNotificationPanel = ref(false)
const notifications = ref([
  {
    id: 1,
    type: 'success',
    title: '系统通知',
    message: '欢迎使用Big ERP系统',
    time: '刚刚',
    read: false
  },
  {
    id: 2,
    type: 'warning',
    title: '待办提醒',
    message: '您有3个待办任务需要处理',
    time: '5分钟前',
    read: false
  },
  {
    id: 3,
    type: 'info',
    title: '系统更新',
    message: '系统已更新到最新版本',
    time: '1小时前',
    read: true
  }
])

const toggleNotifications = () => {
  showNotificationPanel.value = !showNotificationPanel.value
}

const closeNotifications = () => {
  showNotificationPanel.value = false
}

const markAsRead = (notification) => {
  notification.read = true
  notificationCount.value = notifications.value.filter(n => !n.read).length
}

const clearAllNotifications = () => {
  notifications.value = []
  notificationCount.value = 0
  ElMessage.success('已清空所有通知')
}

const toggleSettings = () => {
  // 触发导航设置对话框
  window.dispatchEvent(new CustomEvent('show-navigation-settings'))
}

const handleUserCommand = (command) => {
  if (command === 'logout') {
    ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      const userStore = useUserStore()
      userStore.logout()
      router.push('/login')
      ElMessage.success('已退出登录')
    }).catch(() => {})
  } else if (command === 'profile') {
    router.push('/system/user-settings')
  } else if (command === 'settings') {
    router.push('/system/settings')
  }
}

// 加载显示设置
const loadDisplaySettings = async () => {
  try {
    const response = await keyUser('display_settings')
    if (response && response.code === 200 && response.data) {
      let settingsData = response.data
      if (typeof settingsData === 'string') {
        settingsData = JSON.parse(settingsData)
      } else if (settingsData.value) {
        settingsData = JSON.parse(settingsData.value)
      }
      
      // 应用任务栏位置设置
      if (settingsData.taskbarPosition) {
        taskbarPosition.value = settingsData.taskbarPosition
      }
      if (settingsData.autoHideTaskbar !== undefined) {
        autoHideTaskbar.value = settingsData.autoHideTaskbar
      }
    }
  } catch (error) {
    console.error('加载显示设置失败:', error)
    // 加载失败时使用默认值
  }
}

// 处理显示设置更新事件
const handleDisplaySettingsUpdate = (event) => {
  if (event.detail && event.detail.taskbarPosition) {
    taskbarPosition.value = event.detail.taskbarPosition
  }
  if (event.detail && event.detail.autoHideTaskbar !== undefined) {
    autoHideTaskbar.value = event.detail.autoHideTaskbar
  }
}
</script>

<style scoped>
.win10-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: transparent;
  position: relative;
  overflow: hidden;
}

/* 开始菜单按钮 */
.start-button {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
  margin-right: 4px;
}

.start-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.start-icon {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 返回桌面按钮 */
.desktop-button {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  margin-right: 4px;
  border-radius: 4px;
  position: relative;
}

.desktop-button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.desktop-button.active {
  background: rgba(255, 255, 255, 0.15);
  color: #0078d4;
}

.desktop-button.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: #0078d4;
  border-radius: 2px 2px 0 0;
}

/* 任务栏 */
.taskbar {
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 4px;
  z-index: 1000;
  transition: transform 0.3s ease;
}

/* 底部任务栏（默认） */
.taskbar.taskbar-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-direction: row;
}

.taskbar.taskbar-bottom .taskbar-left {
  flex-direction: row;
}

.taskbar.taskbar-bottom .taskbar-right {
  flex-direction: row;
}

/* 顶部任务栏 */
.taskbar.taskbar-top {
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-direction: row;
}

.taskbar.taskbar-top .taskbar-left {
  flex-direction: row;
}

.taskbar.taskbar-top .taskbar-right {
  flex-direction: row;
}

/* 左侧任务栏 */
.taskbar.taskbar-left {
  top: 0;
  left: 0;
  bottom: 0;
  width: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.taskbar.taskbar-left .start-button {
  margin-bottom: 4px;
  margin-right: 0;
}

.taskbar.taskbar-left .desktop-button {
  margin-bottom: 4px;
  margin-right: 0;
}

.taskbar.taskbar-left .taskbar-left {
  flex-direction: column;
  align-items: center;
  margin-left: 0;
  margin-top: 4px;
  flex: 1;
  width: 100%;
}

.taskbar.taskbar-left .open-windows {
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.taskbar.taskbar-left .window-item {
  flex-direction: column;
  padding: 8px 4px;
  max-width: 100%;
  width: 100%;
  justify-content: center;
}

.taskbar.taskbar-left .window-item.active::after {
  bottom: auto;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  border-radius: 0 2px 2px 0;
}

.taskbar.taskbar-left .window-label {
  display: none;
}

.taskbar.taskbar-left .taskbar-right {
  flex-direction: column;
  margin-top: auto;
  width: 100%;
}

.taskbar.taskbar-left .system-tray {
  flex-direction: column;
  width: 100%;
}

.taskbar.taskbar-left .time-display {
  min-width: auto;
  width: 100%;
  padding: 4px 0;
  font-size: 10px;
}

/* 右侧任务栏 */
.taskbar.taskbar-right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.taskbar.taskbar-right .start-button {
  margin-bottom: 4px;
  margin-right: 0;
}

.taskbar.taskbar-right .desktop-button {
  margin-bottom: 4px;
  margin-right: 0;
}

.taskbar.taskbar-right .taskbar-left {
  flex-direction: column;
  align-items: center;
  margin-left: 0;
  margin-top: 4px;
  flex: 1;
  width: 100%;
}

.taskbar.taskbar-right .open-windows {
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.taskbar.taskbar-right .window-item {
  flex-direction: column;
  padding: 8px 4px;
  max-width: 100%;
  width: 100%;
  justify-content: center;
}

.taskbar.taskbar-right .window-item.active::after {
  bottom: auto;
  right: 0;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  border-radius: 2px 0 0 2px;
}

.taskbar.taskbar-right .window-label {
  display: none;
}

.taskbar.taskbar-right .taskbar-right {
  flex-direction: column;
  margin-top: auto;
  width: 100%;
}

.taskbar.taskbar-right .system-tray {
  flex-direction: column;
  width: 100%;
}

.taskbar.taskbar-right .time-display {
  min-width: auto;
  width: 100%;
  padding: 4px 0;
  font-size: 10px;
}

/* 自动隐藏任务栏 */
.taskbar.taskbar-auto-hide {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.taskbar.taskbar-auto-hide.taskbar-bottom {
  transform: translateY(100%);
}

.taskbar.taskbar-auto-hide.taskbar-top {
  transform: translateY(-100%);
}

.taskbar.taskbar-auto-hide.taskbar-left {
  transform: translateX(-100%);
}

.taskbar.taskbar-auto-hide.taskbar-right {
  transform: translateX(100%);
}

.win10-layout:hover .taskbar.taskbar-auto-hide {
  transform: translate(0, 0);
}

/* 任务栏左侧区域（不要与任务栏位置类混淆） */
.taskbar > .taskbar-left {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  flex: 1;
}

/* 打开的窗口列表 */
.open-windows {
  display: flex;
  align-items: center;
  gap: 4px;
}

.window-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  max-width: 200px;
  position: relative;
}

.window-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.window-item.active {
  background: rgba(255, 255, 255, 0.15);
}

.window-item.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background: #0078d4;
  border-radius: 2px 2px 0 0;
}

.window-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.window-label {
  font-size: 12px;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

/* 更多窗口按钮 */
.more-windows {
  background: rgba(255, 255, 255, 0.08) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.more-windows:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

.more-windows .window-label {
  font-weight: 600;
}

/* 更多窗口下拉菜单 */
.more-windows-menu {
  max-height: 400px;
  overflow-y: auto;
}

.dropdown-window-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.dropdown-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.taskbar-separator {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 8px;
}

.taskbar-search {
  min-width: 200px;
}

.search-input {
  --el-input-bg-color: rgba(255, 255, 255, 0.1);
  --el-input-border-color: rgba(255, 255, 255, 0.2);
  --el-input-text-color: white;
  --el-input-placeholder-color: rgba(255, 255, 255, 0.6);
}


/* 任务栏右侧区域（不要与任务栏位置类混淆） */
.taskbar > .taskbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.system-tray {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tray-item {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  color: white;
  position: relative;
  transition: all 0.2s ease;
}

.tray-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.tray-badge {
  position: absolute;
  top: 2px;
  right: 2px;
}

.time-display {
  font-size: 12px;
  font-weight: 500;
  min-width: 60px;
  text-align: center;
}

.user-avatar {
  cursor: pointer;
  border-radius: 4px;
  padding: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* AI按钮 */
.ai-button {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 6px;
}

.ai-button:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.ai-button.active {
  background: linear-gradient(135deg, #0078d4 0%, #00bcf2 100%);
}

.ai-pulse {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  background: #67c23a;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* 用户下拉菜单样式优化 */
:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.el-dropdown-menu__item .el-icon) {
  font-size: 16px;
}

/* 开始菜单 */
.start-menu {
  position: fixed;
  bottom: 60px;
  left: 12px;
  width: 680px;
  height: 90vh;
  max-height: 800px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(250, 251, 252, 0.95) 50%,
    rgba(245, 247, 250, 0.92) 100%);
  backdrop-filter: blur(50px);
  border-radius: 16px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 8px 32px rgba(0, 120, 212, 0.1);
  z-index: 1002;
  overflow: hidden;
  border: 1px solid rgba(0, 120, 212, 0.15);
}

.start-menu-content {
  display: flex;
  height: 100%;
}

.apps-section {
  flex: 2;
  padding: 24px;
  overflow-y: auto;
}

/* 菜单搜索框 */
.menu-search {
  margin-bottom: 20px;
}

.menu-search :deep(.el-input) {
  --el-input-border-radius: 20px;
}

.menu-search :deep(.el-input__wrapper) {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.menu-search :deep(.el-input__wrapper:hover) {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 120, 212, 0.3);
}

.menu-search :deep(.el-input__wrapper.is-focus) {
  background: white;
  border-color: #0078d4;
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1);
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #323130;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(0, 120, 212, 0.08) 0%, transparent 100%);
  border-radius: 6px;
  border-left: 3px solid #0078d4;
}

.title-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0078d4;
}

.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.app-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.app-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.app-tile:hover::before {
  opacity: 1;
}

.app-tile:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 100%);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 120, 212, 0.3);
}

.app-tile:active {
  transform: translateY(-2px) scale(1.01);
}

.app-tile-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  opacity: 0;
  filter: blur(40px);
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.app-tile:hover .app-tile-glow {
  opacity: 0.15;
}

.app-tile-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.app-tile:hover .app-tile-icon {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.app-tile-name {
  font-size: 13px;
  font-weight: 500;
  color: #323130;
  text-align: center;
  position: relative;
  z-index: 1;
}

.app-tile-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  font-weight: 600;
}

.all-apps {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 搜索结果样式 */
.search-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.empty-search {
  padding: 40px 20px;
}

.search-result-item {
  display: flex;
  align-items: center;
  padding: 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(250, 251, 252, 0.95) 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.search-result-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #0078d4;
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.search-result-item:hover::before {
  transform: scaleY(1);
}

.search-result-item:hover {
  background: linear-gradient(135deg, rgba(0, 120, 212, 0.08) 0%, rgba(0, 120, 212, 0.04) 100%);
  border-color: #0078d4;
  transform: translateX(6px);
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.15);
}

.result-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.search-result-item:hover .result-icon {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.result-info {
  flex: 1;
  min-width: 0;
}

.result-title {
  font-size: 14px;
  font-weight: 500;
  color: #323130;
  margin-bottom: 4px;
}

.result-title :deep(.highlight) {
  background: #ffd60a;
  color: #000;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}

.result-breadcrumb {
  font-size: 12px;
  color: #8a8886;
  display: flex;
  align-items: center;
  gap: 4px;
}

.result-path {
  font-family: 'Consolas', monospace;
  opacity: 0.7;
}

.result-arrow {
  color: #8a8886;
  flex-shrink: 0;
}

/* 应用列表样式 - 现代扁平化设计 */
.app-item {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  margin-bottom: 4px;
  background: transparent;
  border-left: 3px solid transparent;
}

.app-item:hover {
  background: rgba(0, 120, 212, 0.06);
  border-left-color: #0078d4;
  transform: translateX(4px);
}

/* 父级菜单（有子菜单）- 扁平化设计 */
.app-item.parent-item {
  background: rgba(0, 120, 212, 0.04);
  font-weight: 600;
  margin-bottom: 10px;
  border-left: 4px solid #0078d4;
  border-radius: 8px;
}

.app-item.parent-item:hover {
  background: rgba(0, 120, 212, 0.1);
  border-left-width: 4px;
  transform: translateX(6px);
}

/* 子菜单 - 扁平化设计 */
.app-item.sub-item {
  background: transparent;
  border-left: 3px solid rgba(0, 120, 212, 0.2);
  border-radius: 6px;
  position: relative;
}

.app-item.sub-item:hover {
  background: rgba(0, 120, 212, 0.05);
  border-left-color: #0078d4;
  border-left-width: 3px;
  transform: translateX(4px);
}

/* 多级菜单样式 - 扁平化层次设计 */
.app-item.level-1 {
  border-left-color: rgba(0, 120, 212, 0.25);
}

.app-item.level-1:hover {
  background: rgba(0, 120, 212, 0.05);
  border-left-color: rgba(0, 120, 212, 0.8);
}

.app-item.level-2 {
  border-left-color: rgba(0, 120, 212, 0.2);
}

.app-item.level-2:hover {
  background: rgba(0, 120, 212, 0.04);
  border-left-color: rgba(0, 120, 212, 0.7);
}

.app-item.level-3 {
  border-left-color: rgba(0, 120, 212, 0.18);
}

.app-item.level-3:hover {
  background: rgba(0, 120, 212, 0.04);
  border-left-color: rgba(0, 120, 212, 0.65);
}

.app-item.level-4 {
  border-left-color: rgba(0, 120, 212, 0.15);
}

.app-item.level-4:hover {
  background: rgba(0, 120, 212, 0.03);
  border-left-color: rgba(0, 120, 212, 0.6);
}

.app-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 14px;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.app-item:hover .app-item-icon {
  transform: scale(1.05);
}

/* 不同层级的图标尺寸 - 扁平化 */
.app-item.level-1 .app-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 7px;
}

.app-item.level-2 .app-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

.app-item.level-3 .app-item-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
}

.app-item.level-4 .app-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.app-item-info {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
}

.app-item-name {
  font-size: 14px;
  color: #323130;
  transition: all 0.2s ease;
  font-weight: 500;
}

.app-item.parent-item .app-item-name {
  font-weight: 600;
  color: #0078d4;
  font-size: 14.5px;
}

.app-item:hover .app-item-name {
  color: #0078d4;
}

/* 不同层级的文字样式 - 扁平化 */
.app-item.level-1 .app-item-name {
  font-size: 13.5px;
  color: #424242;
  font-weight: 500;
}

.app-item.level-2 .app-item-name {
  font-size: 13px;
  color: #545454;
  font-weight: 500;
}

.app-item.level-3 .app-item-name {
  font-size: 12.5px;
  color: #666666;
  font-weight: 450;
}

.app-item.level-4 .app-item-name {
  font-size: 12px;
  color: #787878;
  font-weight: 450;
}

.app-item-badge {
  margin-left: 8px;
}

.expand-icon {
  margin-left: auto;
  color: #8a8886;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 4px;
  border-radius: 4px;
  background: transparent;
}

.expand-icon:hover {
  background: rgba(0, 120, 212, 0.1);
  color: #0078d4;
}

.app-item.expanded .expand-icon {
  transform: rotate(0deg);
  color: #0078d4;
  background: rgba(0, 120, 212, 0.12);
}

.app-item.parent-item .expand-icon {
  background: rgba(0, 120, 212, 0.08);
  color: #0078d4;
}

.app-item.parent-item.expanded .expand-icon {
  background: rgba(0, 120, 212, 0.15);
  color: #0078d4;
}

/* 右侧已打开功能区 */
.open-tabs-section {
  flex: 1;
  background: linear-gradient(180deg, 
    rgba(0, 120, 212, 0.03) 0%, 
    rgba(0, 0, 0, 0.02) 100%);
  padding: 20px;
  border-left: 1px solid rgba(0, 120, 212, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.open-tabs-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #0078d4 0%, transparent 100%);
}

.tabs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(0, 120, 212, 0.2);
}

.tabs-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #323130;
}

.empty-tabs {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tabs-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tab-item {
  display: flex;
  align-items: center;
  padding: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(250, 251, 252, 0.95) 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.tab-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #0078d4;
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.tab-item:hover::before {
  transform: scaleY(0.5);
}

.tab-item.active::before {
  transform: scaleY(1);
}

.tab-item:hover {
  border-color: rgba(0, 120, 212, 0.3);
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.1);
  transform: translateX(4px);
}

.tab-item.active {
  background: linear-gradient(135deg, rgba(0, 120, 212, 0.12) 0%, rgba(0, 120, 212, 0.08) 100%);
  border-color: #0078d4;
  box-shadow: 0 4px 16px rgba(0, 120, 212, 0.15);
}

.tab-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.tab-item:hover .tab-icon {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.tab-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.tab-title {
  font-size: 14px;
  font-weight: 500;
  color: #323130;
  margin-bottom: 2px;
}

.tab-path {
  font-size: 11px;
  color: #8a8886;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a8886;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.tab-close:hover {
  background: rgba(232, 17, 35, 0.1);
  color: #e81123;
}

.tabs-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.start-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 1001;
}

/* 通知中心 */
.notification-center {
  position: fixed;
  bottom: 60px;
  right: 12px;
  width: 380px;
  height: 90vh;
  max-height: 600px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(40px);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 1002;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.notification-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.02);
}

.notification-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #323130;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.notification-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 12px;
  position: relative;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.notification-item:hover {
  background: rgba(0, 120, 212, 0.05);
  border-color: rgba(0, 120, 212, 0.2);
}

.notification-item.unread {
  background: rgba(0, 120, 212, 0.08);
  border-color: rgba(0, 120, 212, 0.15);
}

.notification-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notification-icon.success {
  background: rgba(103, 194, 58, 0.1);
  color: #67c23a;
}

.notification-icon.warning {
  background: rgba(230, 162, 60, 0.1);
  color: #e6a23c;
}

.notification-icon.info {
  background: rgba(64, 158, 255, 0.1);
  color: #409eff;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: 14px;
  font-weight: 600;
  color: #323130;
  margin-bottom: 4px;
}

.notification-message {
  font-size: 13px;
  color: #605e5c;
  margin-bottom: 4px;
  line-height: 1.4;
}

.notification-time {
  font-size: 11px;
  color: #8a8886;
}

.unread-dot {
  width: 8px;
  height: 8px;
  background: #0078d4;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 1001;
}


/* 主内容区 */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 5px;
  background: #f3f2f1;
}

/* 根据任务栏位置调整主内容区边距 */
.main-content.taskbar-bottom {
  margin-bottom: 48px;
}

.main-content.taskbar-top {
  margin-top: 48px;
}

.main-content.taskbar-left {
  margin-left: 48px;
}

.main-content.taskbar-right {
  margin-right: 48px;
}

/* 桌面页面特殊样式 */
.main-content.is-desktop {
  overflow: hidden;
  padding: 0;
  background: transparent;
  margin-bottom: 0;
}

.empty-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
}

/* 动画 */
.start-menu-enter-active,
.start-menu-leave-active {
  transition: all 0.3s ease;
}

.start-menu-enter-from {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

.start-menu-leave-to {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

.notification-panel-enter-active,
.notification-panel-leave-active {
  transition: all 0.3s ease;
}

.notification-panel-enter-from {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

.notification-panel-leave-to {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}


.page-fade-enter-active,
.page-fade-leave-active {
  transition: all 0.3s ease;
}

.page-fade-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.page-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 响应式 */
@media (max-width: 768px) {
  .start-menu {
    width: calc(100vw - 24px);
    height: 85vh;
  }

  .notification-center {
    width: calc(100vw - 24px);
    right: 12px;
  }
  
  .apps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .taskbar-search {
    min-width: 120px;
  }
}

@media (min-width: 1920px) {
  .start-menu {
    width: 750px;
  }

  .apps-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
</style>
